body {
	background-color: darkgrey;
}

.outBox {
	text-align: center;
}

button {
	margin-top: 20px;
}

.taichi {
	width: 400px;
	height: 400px;
	margin: 100px auto 0;
}

.colorBlack {
	background-color: black;
}

.colorWhite {
	background-color: white;
}

.taichi {
	animation: taichiRotate 5s linear infinite;
}

.taichi .yin,
.taichi .yang {
	width: 200px;
	height: 400px;
	float: left;
}

.taichi .yin {
	border-radius: 200px 0 0 200px;
}

.taichi .yang {
	border-radius: 0 200px 200px 0;
}

.taichi .bigCircle {
	height: 200px;
	width: 200px;
	border-radius: 50%;
}

.taichi .yin .bigCircle {
	transform: translateX(50%) translateY(100%);
}

.taichi .yang .bigCircle {
	transform: translateX(-50%);
}

.taichi .smallCircle {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	transform: translateX(75px) translateY(75px);
}

@keyframes taichiRotate {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}
